<template>
  <view class="list-bg">
    <image class="w-full h-full" src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/index-bg.png"></image>
  </view>
  <uv-skeletons v-if="isShowSkeletons" class="skeleton w-full h-full" :loading="loading" :skeleton="skeleton"></uv-skeletons>

  <view v-else class="safety-88 relative z-10">
    <view>
      <view class="fixed z-12 top-0 w-full" style="background: linear-gradient(to right, #eaeff5 0%, #f5f5f5 100%)">
        <view :style="{ height: commonStore.systemInfo.statusBarHeight + 'px' }"></view>
        <view class="flex items-center justify-between h-96rpx px-32rpx">
          <view class="flex items-center" @click="goUserPage">
            <image
              class="w-62rpx h-62rpx rd-80rpx"
              :src="
                userInfo.avatarUrl ? userInfo.avatarUrl : 'https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/default_avatar.png'
              "
            ></image>
            <view class="ml-16rpx">
              <text class="text-32rpx text-#1C213E font-bold">{{ userInfo.providerName || '默认昵称' }}</text>
              <text class="text-24rpx text-#1C213E px-16rpx py-2rpx rd-4rpx ml-32rpx bg-[rgba(255,255,255,0.5)]">盟友</text>
            </view>
          </view>
          <view v-if="userInfo.goldChannelFlag !== 1 && user.userInfo.pointFlag !== 1" class="pt-8rpx" @click="handleToMember">
            <image class="w-170rpx h-48rpx" src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/mysj.svg"></image>
          </view>
        </view>
      </view>
      <view>
        <view :style="{ height: commonStore.systemInfo.statusBarHeight + 'px' }"></view>
        <view class="h-96rpx"></view>
      </view>
    </view>
    <!--  -->
    <view class="px-32rpx">
      <view class="flex items-center justify-between h-142rpx pl-24rpx mt-16rpx mb-24rpx bg-[rgba(255,255,255,0.7)] rd-8rpx">
        <view>
          <view class="text-28rpx text-#727687">可提现佣金</view>
          <view class="text-40rpx text-#1C213E font-bold">{{ amountTransfer(userInfo.commissionAmount, 2, true) }}</view>
        </view>
        <view
          class="h-58rpx flex items-center pl-24rpx pr-16rpx bg-[rgba(20,132,238,0.1)]"
          style="border-radius: 40rpx 0 0 40rpx"
          @click="goApplyWithdrawal"
        >
          <text class="text-24rpx text-#1484EE mr-8rpx">去提现</text>
          <image
            class="w-28rpx h-28rpx mt-2rpx"
            src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-arrow-right-blue.svg"
          ></image>
        </view>
      </view>
      <!--  -->
      <view
        v-if="user.userInfo.registerZone < 1"
        class="flex items-center justify-between bg-#FEEDED rd-8rpx py-16rpx px-24rpx mb-24rpx"
        @click="goPersonal"
      >
        <view class="flex items-center">
          <image
            class="w-28rpx h-28rpx mr-16rpx"
            src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-warning.svg"
          ></image>
          <text class="text-24rpx text-#F94B4A">请完善地址信息，否则无法发布线索</text>
        </view>
        <view class="flex items-center">
          <text class="text-24rpx text-#F94B4A">去完善</text>
          <uv-icon name="arrow-right" color="#F94B4A" top="2rpx" size="24rpx"></uv-icon>
        </view>
      </view>
      <view class="flex items-center pl-32rpx bg-#ffffff rd-8rpx mb-24rpx">
        <text class="text-28rpx text-#EFB339 font-bold">佣金</text>
        <text class="text-28rpx text-#1C213E font-bold pr-24rpx" style="border-right: 2rpx solid #e6e6e6">喜讯</text>
        <view class="flex-1 min-w-0">
          <uv-notice-bar
            custom-style="notice-bar"
            :text="noticeMessage"
            direction="column"
            bg-color="#ffffff"
            color="#1C213E"
            font-size="28rpx"
            duration="3000"
            :icon="false"
          ></uv-notice-bar>
        </view>
      </view>
      <!--  -->
      <view class="h-120rpx mb-24rpx" @click="goRelease">
        <image class="w-full h-full" src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/home-relase.png"></image>
      </view>
      <!--  -->
      <view class="pt-30rpx bg-#ffffff rd-8rpx mb-24rpx">
        <view class="text-32rpx text-#1C213E font-bold mb-32rpx pb-24rpx px-24rpx" style="border-bottom: 2rpx solid #f5f5f5">做任务，拿佣金！</view>
        <view class="flex items-center pb-24rpx mx-24rpx">
          <image class="w-78rpx h-78rpx mr-16rpx" src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/gold.png"></image>
          <view class="flex items-center justify-between flex-1 min-w-0">
            <view>
              <view class="text-28rpx text-#1C213E font-bold">邀请好友注册</view>
            </view>
            <mt-button shape="circle" class="share" @click="goInvite">去邀请</mt-button>
          </view>
        </view>
        <view v-for="item in activityList" :key="item.id" class="flex items-center py-24rpx mx-24rpx" style="border-top: 2rpx solid #f5f5f5">
          <image class="w-78rpx h-78rpx mr-16rpx" src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/gold.png"></image>
          <view class="flex items-center justify-between flex-1 min-w-0">
            <view class="flex-1 min-w-0 mr-10rpx">
              <view class="text-28rpx text-#1C213E font-bold ellipsis">活动分享-{{ item.activityName }}</view>
            </view>
            <mt-button shape="circle" class="share" style="background-color: #f7775c" @click="openShare(item)">去分享</mt-button>
          </view>
        </view>
      </view>
      <!--  -->
      <view v-if="clueFlow">
        <view class="text-32rpx text-#1C213E font-bold pb-24rpx">线索动态</view>
        <view class="flex items-center bg-#ffffff rd-8rpx px-24rpx py-32rpx">
          <image
            class="w-48rpx h-48rpx rd-48rpx mr-16rpx"
            src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/gold.png"
          ></image>
          <view class="flex items-center flex-1 min-w-0 mr-16rpx">
            <text class="text-28rpx text-#727687">线索</text>
            <view class="w-150rpx text-28rpx text-#1484EE underline ellipsis mx-16rpx">{{ clueFlow.clueNo }}</view>
            <text class="text-28rpx text-#727687">更新了动态</text>
          </view>
          <mt-button shape="circle" class="release" @click="goClueDetail">去查看</mt-button>
        </view>
      </view>
    </view>
  </view>

  <mt-tabbar></mt-tabbar>
  <app-renew></app-renew>
</template>

<script setup>
import { getProvinceInfo, providerCommissiongetProviderCommissionNews, cluegetLatestClueFollowUp } from '@/api/index.js';
import { activitygetAppActivitySharePage, activityappgetShareUrlLink } from '@/api/mixed';
import { amountTransfer, openAppShare } from '@/utils/tools.js';
import useCommonStore from '@/store/common';
import userStore from '@/store/user';

const user = userStore();
const commonStore = useCommonStore();

const isShowSkeletons = ref(false);
const loading = ref(true);
const skeleton = ref([
  {
    type: 'flex',
    num: 1,
    style: 'padding: 32rpx 32rpx',
    children: [
      {
        type: 'avatar',
        num: 1,
        style: 'marginRight: 10rpx;'
      },
      {
        type: 'line',
        num: 2,
        gap: '30rpx',
        style: ['width: 200rpx;', 'width:375rpx;']
      },
      {
        type: 'custom',
        num: 1,
        style: 'width: 48rpx;height: 48rpx;marginLeft: 10rpx;marginTop: 20rpx'
      }
    ]
  },
  {
    type: 'flex',
    num: 1,
    style: 'padding: 32rpx 32rpx',
    children: [
      {
        type: 'line',
        num: 3,
        style: ['width: 100%;height: 348rpx;', 'width: 100%;height: 348rpx;', 'width: 100%;height: 548rpx;']
      }
    ]
  }
]);

function goUserPage() {
  uni.reLaunch({
    url: '/pages/my/index'
  });
}

function goPersonal() {
  uni.navigateTo({
    url: '/pages/index/personal'
  });
}

function goApplyWithdrawal() {
  uni.navigateTo({
    url: '/subCommission/pages/applyWithdrawal'
  });
}
const handleToMember = () => {
  uni.navigateTo({
    url: '/subMember/pages/memberCenter?type=1'
  });
};
function goRelease() {
  uni.navigateTo({
    url: '/subClue/pages/release'
  });
}

function goInvite() {
  uni.navigateTo({
    url: `/subInvite/pages/code?inviteCode=${user.userInfo.inviteCode}`
  });
}

const noticeMessage = ref([]);
async function getReal() {
  const res = await providerCommissiongetProviderCommissionNews();
  noticeMessage.value = res.data.map((son) => son.content);
}

const clueFlow = ref(null);
async function getClueFllow() {
  const res = await cluegetLatestClueFollowUp();
  clueFlow.value = res.data;
}

function goClueDetail() {
  uni.navigateTo({
    url: `/subClue/pages/detail?type=1&id=${clueFlow.value.clueId}`
  });
}

// 获取用户信息
const userInfo = ref({});
const getUserInfo = () => {
  getProvinceInfo().then((res) => {
    userInfo.value = res.data;
    user.setUserInfo(res.data);
  });
};

const activityList = ref([]);
async function getActivity() {
  const res = await activitygetAppActivitySharePage({
    pageNum: 1,
    pageSize: 10,
    lastId: ''
  });
  activityList.value = res.data?.items || [];
}

const shareUrl = ref('');
async function getShareLink(activityId) {
  const res = await activityappgetShareUrlLink({ activityId, path: '/subActivity/pages/activityDetail' });
  shareUrl.value = res.data;
}

const shareFlag = ref(true);
async function openShare(item) {
  if (!shareFlag.value) return;

  shareFlag.value = false;

  await getShareLink(item.id);
  // #ifdef APP
  openAppShare({
    href: shareUrl.value,
    title: item.activityName,
    summary: item.activityType,
    imageUrl: item.coverFile[0].url,
    success: (e) => {
      shareFlag.value = true;
      if (e.event === 'clickMenu' && e.menu[e.index].share === 'custom') {
        // 点击的生成海报
        openPoster(item);
      }
    }
  });
  // #endif

  // #ifndef APP
  openPoster(item);
  // #endif
}

function openPoster(item) {
  uni.setStorageSync('poster', {
    bgImg: item.posterFile[0].url,
    qrcodeText: shareUrl.value,
    qrcodeImg: ''
  });
  shareFlag.value = true;
  uni.navigateTo({
    url: '/subActivity/pages/poster'
  });
}

onLoad(async () => {
  isShowSkeletons.value = true;
  loading.value = true;
  await getUserInfo();
  isShowSkeletons.value = false;
  loading.value = false;
  getActivity();
  getReal();
  getClueFllow();
});

onShow(() => {
  shareFlag.value = true;
});
</script>

<style lang="scss" scoped>
.list-bg {
  height: 620rpx;
  position: fixed;
  right: 0;
  top: 0;
  left: 0;
}
.skeleton {
  position: relative;
  top: 0;
  bottom: 0;
}
.share.mt-button {
  font-size: 28rpx;
  min-width: 124rpx;
  padding: 10rpx 28rpx;
}
.release.mt-button {
  font-size: 28rpx;
  min-width: 124rpx;
  padding: 10rpx 28rpx;
}
</style>
